@extends('admin.layout')
@section('title', '网站 - 首页')
@section('content')
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <!-- 数据统计 -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="row row-sm text-center">
                                <div class="col-xs-6 col-sm-3">
                                    <div class="panel padder-v item lazur-bg">
                                        <div class="h1 text-fff font-thin h1">521</div>
                                        <span class="text-muted text-xs">会员人数</span>
                                        <div class="top text-right w-full">
                                            <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                    <div class="panel padder-v item bg-info">
                                        <div class="h1 text-fff font-thin h1">521</div>
                                        <span class="text-muted text-xs">在线人数</span>
                                        <div class="top text-right w-full">
                                            <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                    <div class="panel padder-v item bg-primary">
                                        <div class="h1 text-fff font-thin h1">521</div>
                                        <span class="text-muted text-xs">今日消息</span>
                                        <div class="top text-right w-full">
                                            <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-3">
                                    <div class="panel padder-v item red-bg">
                                        <div class="h1 text-fff font-thin h1">1129</div>
                                        <span class="text-muted text-xs">历史消息</span>
                                        <div class="top text-right w-full">
                                            <i class="fa fa-caret-down text-warning m-r-sm"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 服务器状态 -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-bottom:none;background:#fff;">
                                    <h5>服务器状态</h5>
                                </div>
                                <div class="ibox-content" style="border-top:none;">
                                    <div id="flot-line-chart-moving" style="height:217px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 服务器信息 -->
                <div class="col-sm-12">
                    <div class="ibox-title" style="border-bottom:none;background:#fff;">
                        <h5>服务器信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    <tr>
                                        <th class="text-nowrap">服务器系统 </th>
                                        <td><code>{{$data['os']}}</code> </td>
                                        <th class="text-nowrap">服务器读写权限</th>
                                        <td><?php echo is_writable('../config/webset.php') ? '<span style="color: green;">可写</span>' : '<span style="color: red;">不可写</span>'?></td>

                                    </tr>
                                    <tr>
                                        <th class="text-nowrap">服务器解释引擎 </th>
                                        <td><code>{{$data['jsyq']}}</code></td>
                                        <th class="text-nowrap">PHP运行版本</th>
                                        <td><code>{{$data['php']}}</code> </td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap">源码来源</th>
                                        <td>708298599</td>
                                        <th class="text-nowrap">源码当前版本</th>
                                        <td>v1.0</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--flotdemo-->
        <script type="text/javascript">
            $(function () {
                var container = $("#flot-line-chart-moving");
                var maximum = container.outerWidth() / 2 || 300;
                var data = [];

                function getRandomData() {
                    if (data.length) {
                        data = data.slice(1);
                    }
                    while (data.length < maximum) {
                        var previous = data.length ? data[data.length - 1] : 50;
                        var y = previous + Math.random() * 10 - 5;
                        data.push(y < 0 ? 0 : y > 100 ? 100 : y);
                    }
                    var res = [];
                    for (var i = 0; i < data.length; ++i) {
                        res.push([i, data[i]])
                    }
                    return res;
                }
                series = [{
                    data: getRandomData(),
                    lines: {
                        fill: true
                    }
                }];
                var plot = $.plot(container, series, {
                    grid: {
                        color: "#999999",
                        tickColor: "#f7f9fb",
                        borderWidth: 0,
                        minBorderMargin: 20,
                        labelMargin: 10,
                        backgroundColor: {
                            colors: ["#ffffff", "#ffffff"]
                        },
                        margin: {
                            top: 8,
                            bottom: 20,
                            left: 20
                        },
                        markings: function (axes) {
                            var markings = [];
                            var xaxis = axes.xaxis;
                            for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                                markings.push({
                                    xaxis: {
                                        from: x,
                                        to: x + xaxis.tickSize
                                    },
                                    color: "#fff"
                                });
                            }
                            return markings;
                        }
                    },
                    colors: ["#4fc5ea"],
                    xaxis: {
                        tickFormatter: function () {
                            return "";
                        }
                    },
                    yaxis: {
                        min: 0,
                        max: 110
                    },
                    legend: {
                        show: true
                    }
                });
                // Update the random dataset at 25FPS for a smoothly-animating chart
                setInterval(function updateRandom() {
                    series[0].data = getRandomData();
                    plot.setData(series);
                    plot.draw();
                }, 40);
            });

        </script>
@endsection
